<template>
	<view class="content">
		<view class="typeView">
			<axb-check-box :list="typeList" @change="chooseType"></axb-check-box>
			
		</view><text class="unread-msg" v-if="applyMsgTotal != 0">{{applyMsgTotal}}</text>	
		
		<view v-if="!flag" class="content-view" v-for="(item, index) in dataList1" :key="index" @click="toDetail(item)">
			<view class="content-content">
				<view style="float: left;width: 70%;">
					<view class="nameClass" style="margin-top: 20rpx;">{{item.applyName}}</view>
					<view class="content-text"
						style="margin-top: 26upx; font-size: 24rpx; color: #778288;height: 70rpx;">{{item.applyTime}}</view>
				</view>
				
				<view style="float: right;width: 26%;margin-top: 34rpx;">
					<view v-if="item.status == '1'" class="logo" style="background-color: #3cb458;">已通过</view>
					<view v-if="item.status == '2'" class="logo">审核中</view>
					<view v-if="item.status == '0'" class="logo" style="background-color: #666666;">未通过</view>
				</view>
				
			</view>
		</view>
		
		
		<view v-if="flag" class="content-view" v-for="(item, index) in dataList2" :key="index" @click="toApplyDetail(item)" style="height: 200rpx;">
			<view class="content-content">
				<view style="float: left;width: 70%;">
					<view class="nameClass" style="margin-top: 20rpx;">{{item.adoptName}}</view>
					<view class="content-text"
						style="margin-top: 22upx; font-size: 24rpx; color: #778288;height: 50rpx;">申请人：{{item.userName}}</view>
					<view class="content-text"
						style="font-size: 24rpx; color: #778288;height: 50rpx;">{{item.applyTime}}</view>
				</view>
				
				<view style="float: right;width: 26%;margin-top: 60rpx;">
					<view v-if="item.isPassed == '0'" class="logo1" style="background-color: #666666">已拒绝</view>
					<view v-if="item.isPassed == '1'" class="logo1" style="background-color: #3cb458">已通过</view>
					<view v-if="item.isPassed == '2'" class="logo1">去处理</view>
				</view>
				
			</view>
		</view>
		
		<view v-if="!flag && dataList1.length == 0" class="cue-words">没有更多数据</view>
		<view v-if="flag && dataList2.length == 0" class="cue-words">没有更多数据</view>

		<view style="height: 80rpx;"></view>

	</view>
</template>

<script>
	import axbCheckBox from '../../components/axb-checkbox/axb-checkbox.vue'
	import http from '@/api/backend.js'
	export default {
		components: {
			axbCheckBox
		},
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				flag: false,
				typeList: [{
						name: "我申请的",
						value: "1",
						checked: 1
					},
					{
						name: "我收到的",
						value: "2",
						checked: 0
					}
				],
				dataList1: [],
				dataList2: [],
				applyMsgTotal: 0
			}
		},
		onLoad() {
			this.chooseType("1")
		},
		onShow() {
			setInterval(() => {
				this.queryApplyCount()
			}, 1000);
		},
		onPullDownRefresh() {
			this.dataList1 = []
			this.dataList2 = []
			this.queryList1(this.pageNum, this.pageSize, "")
			this.queryList2(this.pageNum, this.pageSize, "")
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.pageNum++;
			this.queryList1(this.pageNum, this.pageSize, "")
			this.queryList2(this.pageNum, this.pageSize, "")
		},
		methods: {
			chooseType(e) {
				if(e == "1") {
					this.dataList1 = []
					this.queryList1(this.pageNum, this.pageSize, "", "")
					this.flag = false
				}else {
					this.dataList2 = []
					this.queryList2(this.pageNum, this.pageSize, "", "")
					this.flag = true
				}
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/home/detail?adoptId=${item.adoptId}&applyId=${item.applyId}`
				});
			},
			toApplyDetail(item) {
				uni.navigateTo({
					url: `/pages/home/applyDetail?id=${item.id}`
				});
			},
			queryList1(pageNum, pageSize, userId) {
				const userInfo = uni.getStorageSync('userInfo')
				http.queryMyApplyList({pageNum: pageNum, pageSize: pageSize, userId: userInfo.openId}).then(res => {
					this.dataList1 = this.dataList1.concat(res.data)
				})
			},
			queryList2(pageNum, pageSize, userId) {
				const userInfo = uni.getStorageSync('userInfo')
				http.queryReceiveApplyList({pageNum: pageNum, pageSize: pageSize, userId: userInfo.openId}).then(res => {
					this.dataList2 = this.dataList2.concat(res.data)
				})
			},
			// 查询领养申请未处理消息总数
			queryApplyCount() {
				const userInfo = uni.getStorageSync('userInfo')
				if(userInfo.openId == undefined || userInfo.openId == null) {
					return
				}
				http.applyCount({userId: userInfo.openId}).then(res => {
					this.applyMsgTotal = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 30rpx;
	}
	
	.typeView {
		margin-left: -20upx;
		margin-top: 10rpx;
	}
	
	.content-view {
		width: 100%;
		height: 150upx;
		box-shadow: 0 0 9px 3px #cee1eb;
		margin: 0 auto;
		border-radius: 20upx;
		margin-top: 50rpx;
	
		.content-content {
			flex-direction: column;
			height: 150upx;
			justify-content: center;
			padding-left: 30upx;
			width: 100%;
	
			.logo {
				width: 120rpx;
				height: 80rpx;
				background-color: #fca400;
				border-radius: 50%;
				font-size: 24rpx;
				text-align: center;
				line-height: 80rpx;
				color: #FFFFFF;
				transform: rotate(-45deg)
			}
			
			.logo1 {
				width: 120rpx;
				height: 60rpx;
				background-color: #1976D2;
				border-radius: 15%;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;
				color: #FFFFFF;
			}
	
			// 文字超出...
			.nameClass {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
	
	.cue-words {
		text-align: center;
		font-size: 28rpx;
		color: #778288;
		margin-top: 22rpx;
	}
	
	.unread-msg {
		background-color: red;
		color: #FFFFFF;
		border-radius: 100rpx;
		width: 26rpx;
		height: 26rpx;
		font-size: 28rpx;
		line-height: 26rpx;
		text-align: center;
		float: left;
		padding: 4rpx;
		margin-left: 263rpx;
		margin-top: -60rpx;
	}
	
</style>
